<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>斗兽棋</title>
</head>

<body>
  <div id="box">

    <div id="help" style="background-color: bisque;">
      <header>
        <h1>斗兽棋帮助</h1>
        <p>xianyu-plugin 斗兽棋</p>
      </header>
      <div class="container">
        <section class="section">
          <h2>游戏目标</h2>
          <p>将己方任意棋子移至对方洞穴</p>
        </section>
        <section class="section">
          <h2>走棋规则</h2>
          <p>1. 所有动物一次走一格，前后左右都可以。</p>
          <p>2. 鼠可以进入小河，跟在陆地行走一样</p>
          <p>3. 狮、豹、虎 可以跳过小河，直接吃对面的棋子</p>
        </section>
        <section class="section">
          <h2>吃棋规则</h2>
          <p>1. 基本吃法：象〉狮〉虎〉豹〉狼〉狗〉猫〉鼠</p>
          <p>2. 鼠能吃象，象不能吃鼠</p>
          <p>3. 当一方棋子处于对方的陷阱处，任意棋子都可以吃该棋子</p>
          <p>4. 相同动物可以互吃</p>
        </section>
        <section class="section">
          <h2>特殊吃法</h2>
          <p>1. 当鼠在小河内，不能直接吃陆地上的任何棋子</p>
        </section>
      </div>
      <table>
        <tbody>
          <tr>
            <th>指令</th>
            <th>说明</th>
            <th>示例</th>
          </tr>
          <tr>
            <th>发起/加入斗兽棋<br></td>
            <td>发起游戏</td>
            <td>发起斗兽棋、#加入斗兽棋</td>
          </tr>
          <tr>
            <th>加入斗兽棋+黑/白<br></td>
            <td>游戏中途加入队伍，加入队伍后可操作棋盘</td>
            <td>加入斗兽棋黑、#加入斗兽棋白</td>
          </tr>
          <tr>
            <th>移动</td>
            <td>移动棋子，#移动+选择+目的地，示例中意思为将g4的棋子移动到e4的位置</td>
            <td>移动g4e4</td>
          </tr>
          <tr>
            <th>结束游戏</td>
            <td>认输</td>
            <td>结束游戏</td>
          </tr>
        </tbody>
        <colgroup>
          <col>
          <col>
          <col>
        </colgroup>
      </table>
    </div>

  </div>
  <div style="text-align: center;">{{ AppName }} / {{AppVersion}}</div>
  <style>
    body {
      background-color: #B58863;
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
      line-height: 1.5;
    }

    header {
      background-color: #B58863;
      color: #fff;
      padding: 20px;
      text-align: center;
    }

    .container {
      width: 80%;
      margin: 0 auto;
      padding: 20px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      align-items: flex-start;
    }

    .section {
      flex-basis: 30%;
      margin-bottom: 30px;
    }

    h2 {
      font-size: 24px;
      margin-top: 0;
    }

    p {
      font-size: 16px;
      margin-bottom: 0;
    }

    #box{
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      background-size: cover;
    }

    th {
      text-align: center;
      background-color: #fddbb3;
    }

    th,
    td,
    th,
    #help {
      border: 2px solid #B58863;
      border-left-color: #fff;
      border-top-color: #fff;
      text-align: left;
      padding: 8px;
    }

  </style>

</body>

</html>